<template>
    <view>
        <view class="tab-top">
            <view :class="active === 0 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 0">全部</view>
            <view :class="active === 1 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 1">退款中</view>
            <view :class="active === 2 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 2">退款成功</view>
            <view :class="active === 3 ? 'tab-top-item active' : 'tab-top-item'" @click="active = 3">退款失败</view>
        </view>
        <view class="content">
            <swiper :current="active" @change="swiperChange" class="swiper">
                <swiper-item>
                    <scroll-view style="height:100%" scroll-y>
                        <view class="order-item">
                            <view class="order-title">退款中</view>
                            <view class="order-info">
                                <view class="order-img"></view>
                                <view class="order-info-right">
                                    <view class="order-name">广西平果鸳鸯滩广西平果鸳鸯滩</view>
                                    <view class="order-price">
                                        <view style="color:#FF1E1E;font-size:36rpx">￥132.0</view>
                                        <view>
                                            <i class="iconfont icon-chenghao" style="color:#333333"></i>
                                            <text style="color:#666666;font-size:26rpx">1</text>
                                        </view>
                                    </view>
                                    <view class="order-text">共1件商品，合计￥132.0（含运费）</view>
                                </view>
                            </view>
                            <view class="refund-detail" @tap="goRefundDetail">详情</view>
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item>待付款</swiper-item>
                <swiper-item>
                    <scroll-view style="height:100%" scroll-y>
                        <view class="order-item" @tap="goUseVirtualOrder">
                            <view class="order-title">
                                <view class="order-number">订单编号：2324345</view>
                                <view class="order-type">待使用</view>
                            </view>
                            <view class="order-info">
                                <view class="order-img"></view>
                                <view class="order-info-right">
                                    <view class="order-name">广西平果鸳鸯滩广西平果鸳鸯滩</view>
                                    <view class="order-price">
                                        <view style="color:#FF1E1E;font-size:36rpx">￥132.0</view>
                                        <view>
                                            <i class="iconfont icon-chenghao" style="color:#333333"></i>
                                            <text style="color:#666666;font-size:26rpx">1</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="order-handle">
                                <view class="canel-order">取消订单</view>
                                <view class="pay">付款</view>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item>待收货</swiper-item>
            </swiper>
        </view>
    </view>
</template>
    
<script>
export default {
    data() {
        return {
            active: 0
        }
    },
    methods: {
        swiperChange(e) {
            this.active = e.detail.current
        },
        goUseVirtualOrder() {
            uni.navigateTo({
                url: '/pagesC/order-virtual-use/order-virtual-use'
            })
        },
        goRefundDetail() {
            uni.navigateTo({
                url: '/pagesC/refund-detail/refund-detail'
            })
        }
    }
}
</script>

<style>
    .tab-top {
        height: 85rpx;
        background: rgba(255,255,255,1);
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 85rpx;
        padding: 0 55rpx;
        display: flex;
        justify-content: space-between;
    }
    .active {
        color: #24C79C;
    }
    .tab-top-item {
        position: relative;
    }
    /* .active::after {
        content: '';
        position: absolute;
        bottom: 11rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 37rpx;
        height: 4rpx;
        background: #24C79C;
    } */
    .content {
        height: 1362rpx;
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .order-item {
        position: relative;
        width: 674rpx;
        height: 400rpx;
        margin: 20rpx auto 0;
        /* padding: 22rpx 27rpx; */
        background:rgba(255,255,255,1);
        border-radius:10px; 
    }
    .order-item:last-child {
        margin-bottom: 156rpx;
    }
    .order-title {
        padding: 20rpx 31rpx 17rpx 0;
        text-align: right;
        color: #FF1E1E;
        font-size: 28rpx;
        border-bottom: 1rpx solid #F5F5F5;
    }
    .order-info {
        display: flex;
        justify-content: left;
        margin-top: 36rpx;
    }
    .order-img {
        width: 198rpx;
        height: 198rpx;
        border: 1rpx solid #ccc;
        margin-left: 22rpx;
    }
    .order-info-right {
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .order-name {
        width: 247rpx;
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        overflow: hidden;
        text-overflow:  ellipsis;
        white-space: nowrap;
    }
    .order-price {
        display: flex;
        justify-content: space-between;
    }
    .order-text {
        color: #999999;
        font-size: 24rpx;
    }
    .refund-detail {
        position: absolute;
        bottom: 18rpx;
        right: 24rpx;
        width: 122rpx;
        height: 46rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 23rpx;
        font-weight:500;
        font-size: 28rpx;
        color:rgba(36,199,156,1);
        text-align: center;
        line-height: 46rpx;
    }
</style>